<template>
  <div class="remengeshou">
    <!-- 选择更换歌手类型 -->
    <van-dropdown-menu>
      <van-dropdown-item v-model="singerTypeValue" :options="singerTypeOption" v-on:change="valueChange" />
    </van-dropdown-menu>
    <!-- 歌手列表 -->
    <van-list :offset="500" v-if="changeListShow" :immediate-check="false" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell v-for="item in currentSingerList" :key="item.id" v-on:click="$router.push(`/geshouDetail?id=${item.id}`)">
        <template>
          <div class="singer_c">
            <van-image width="100%" height="100%" :src="item.picUrl"></van-image>
          </div>
          <div class="singer_n">{{item.name}}</div>
					<van-icon name="arrow" />
        </template>
      </van-cell>
    </van-list>
    <!-- 加载loading -->
    <van-loading v-else color="red" vertical size="35px" text-size="18px">加载中...</van-loading>
  </div>
</template>

<script>
import { getRemengeshou } from '../../../utils/api'
export default {
  name: 'RemenGeshou',
  data () {
    return {
      // 当前选择的歌手类型
      singerTypeValue: 1,
      singerTypeOption: [{
        text: '华语',
        value: 1
      }, {
        text: '欧美',
        value: 2
      }, {
        text: '韩国',
        value: 3
      }, {
        text: '日本',
        value: 4
      }],
      // 使用v-if 重新触发全部生命周期 防止切换歌单类型后发起两次请求 导致错误
      changeListShow: true,
      loading: false,
      finished: false,
      // 当前歌手列表
      currentSingerList: [],
      // 全部歌手
      allSingerList: [],
      // 每次限制的数量
      limit: 15,
      // 总数
      total: 0,
      // 每次开始的offset
      offset: 0
    }
  },
  methods: {
    // 获取歌手内容
    async getSingerFn () {
      let result = await getRemengeshou(this.singerTypeValue);
      if (result.code === 200) {
        this.allSingerList = result.list.artists;
        this.total = result.list.artists.length;
        this.currentSingerList = result.list.artists.slice(0, this.limit);
        this.offset = this.limit;
        this.finished = false;
      }
    },
    async valueChange (type) {
      // 返回顶部
      window.scroll(0, 0);
      // 使用v-if 重新触发全部生命周期 防止切换歌单类型后发起两次请求 导致错误
      this.changeListShow = false;
      this.currentSingerList = [];
      let result = await getRemengeshou(type);
      if (result.code === 200) {
        this.allSingerList = result.list.artists;
        this.total = result.list.artists.length;
        this.currentSingerList = result.list.artists.slice(0, this.limit);
        this.offset = this.limit;
        this.finished = false;
        // 使用v-if 重新触发全部生命周期 防止切换歌单类型后发起两次请求 导致错误
        this.changeListShow = true;
      }
    },
    // 加载数据
    onLoad () {
      // 异步更新数据
      this.currentSingerList.push(...this.allSingerList.slice(this.offset, this.offset + this.limit));
      this.offset = this.offset + this.limit;
      this.loading = false;
      // 数据全部加载完成
      if (this.currentSingerList.length >= this.total) {
        this.finished = true;
      }
    }
  },
  mounted () {
    this.getSingerFn();
  }
}
</script>

<style lang="less" scoped>
	.remengeshou{
		padding-top: 100/50rem;
	}
	.van-dropdown-menu{
		/deep/ .van-dropdown-menu__bar{
			position: fixed;
			width: 100%;
			z-index: 1;
			box-shadow: none;
			height: 100/50rem;
		/deep/ .van-dropdown-menu__title{
				font-size: 0.65rem;
				line-height: 1.3;
			}
		}
		/deep/ .van-cell__title{
			font-size: 0.62rem;
		}
    /deep/ .van-ellipsis{
      font-size: 0.6rem;
    } 
	}
	.van-list{
		margin-bottom: 70/50rem;
		padding-top: 2rem;
    /deep/ .van-list__finished-text{
      height: 100/50rem;
      line-height: 70/50rem;
    }
	}
	.van-loading{
    padding-top: 3rem;
  }
	.van-cell{
		padding: 0;
		.van-cell__value{
			padding: 20/50rem;
			display: flex;
			align-items: center;
			position: relative;
			.singer_c{
				width: 150/50rem;
				height: 150/50rem;
				border-radius: 50%;
				overflow: hidden;
				background-color: pink;
				margin-right: 40/50rem;
			}
			.singer_n{
				font-size: 40/50rem;
				width: 550/50rem;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
        line-height: 1.3;
			}
			.van-icon:before{
				position: absolute;
				right: 0.3rem;
				top: 50%;
				color: #888;
				font-size: 38/50rem;
				transform: translateY(-50%);
			}	
		}
	}
</style>